﻿// JavaScript Document

var sTop;//当前浏览器scrollTop
var infoTxt;
var imgNum = 258;//259张图片随着导航栏而进行动态运行
var imgFrame; //動畫播放影格---对应图片
var winH;
var bodyH = 13000;//动态片段长度
var rateW;

var pageAboutStart		= 0;//about 开始位置
var pageAboutEnd 		= 500;//about 结束位置
var pagePortfolioStart 	= 4500;//work 开始位置
var pagePortfolioEnd 	= 6000;//work 结束位置
var pageContactStart	= 10000;//contact 开始位置
var pageContactEnd		= bodyH;//contact 结束位置

var aboutInitTop;
var portfolioInitTop;
var contactInitTop;

function scrollInit(){
	
	$('#videoBlock').css({ height:bodyH });//定义影片高度（长度）
	
	//calling jPreLoader
	if (isIE7 || isIE8) {
	}else{
		for(var i=1 ; i<=imgNum+1 ; i++){
			//http://www.oliveyang.com/
			$('<img class="imgObj" src="imgs/video/low/' + i + '.jpg" />').appendTo('#videoPlay');//加载影片中动态人物所属的图片，因为下面有预加载图片功能。
		};
		//开始预加载，页面所需的所有图片
		$('body').jpreLoader({
			autoClose: true
		}, function() {	//callback function			
			scrollerHandler();//?
			winTopHandler( pageAboutStart );//返回about位置
			preLoadClose();//加载完毕，显示页面内容
		});	
	}
	
	aboutImgAniFrame();		//影格動態---关于我页面内容动态运动
	contactImgAniFrame();	//影格動態---联系我页面内容动态运动
	
	scrollerHandler();//?
	portfolioStartAni();//?
	portfolioEndAni();//?
	
	$(window).scroll(function(e){
		scrollerHandler();
	});
	
};

function scrollerHandler(){
	
	//捲軸目前位置
	sTop = $(window).scrollTop();
	
	//單元歸零
	aboutInitTop 		= sTop - pageAboutEnd;
	portfolioInitTop	= sTop - pagePortfolioEnd;
	contactInitTop		= sTop - pageContactStart;
	
	if( aboutInitTop < 0 ){
		aboutInitTop = 0
	}else if( aboutInitTop > (pagePortfolioStart - pageAboutEnd)){
		aboutInitTop = (pagePortfolioStart - pageAboutEnd);
	};
	
	if( portfolioInitTop < 0 ){ portfolioInitTop = 0 };	
	if( contactInitTop < 0 ){ contactInitTop = 0 };
	
	//影格判斷
	if( sTop < pageAboutEnd ){											//關於我退場
		
		imgFrame = 1;
		$('.arrowBtn').css({display:'none'});//隐藏-作品集的按钮
		
	}else if( sTop > pageAboutEnd && sTop < pagePortfolioStart ){		//作品集進場
		
		imgFrame = Math.ceil(aboutInitTop / ((pagePortfolioStart - pageAboutEnd)/130))+1;
		$('.arrowBtn').css({display:'block'});//显示-作品集的按钮
		
	}else if( sTop > pagePortfolioStart && sTop < pagePortfolioEnd ){	//作品集退場
		
		imgFrame = 130;
		$('.arrowBtn').css({display:'block'});//显示-作品集的按钮
		
	}else if( sTop > pagePortfolioEnd && sTop < pageContactStart ){		//聯絡我進場
		
		imgFrame = Math.ceil(portfolioInitTop / ((pageContactStart - pagePortfolioEnd)/129))+130;
		
	}else if( sTop > pageContactStart ){								//聯絡我資訊進場
		
		imgFrame = 259;
		contactAni();
		
	};
	
	//關於我退場動態
	aboutAni();//五个图片根据sTop发生动态改变
	
	//作品集進退場動態
	if(sTop < pagePortfolioStart){
		portfolioStartAni();//作品集左右两个按钮发送动态改变
	}else if(sTop > pagePortfolioEnd){
		portfolioEndAni();//作品集左右两个按钮发送动态改变
	};
	
	if(sTop > pagePortfolioStart && sTop < pagePortfolioEnd){
		//作品集内容进场
		$('ul#portfolioList').css({display:'block'});//显示---作品集内容
		TweenLite.to( $('ul#portfolioList'), 0.8, { css:{ opacity:1 }, ease:Quart.easeOut});
		$('#pageContact').css({ zIndex:1111 });
	}else{
		//作品集内容退场
		TweenLite.to( $('ul#portfolioList'), 0.8, { css:{ opacity:0 }, ease:Quart.easeOut, onComplete:aniFIN});
		$('#pageContact').css({ zIndex:19999 });
	};
	//作品集内容退场-完成操作
	function aniFIN(){
		$('ul#portfolioList').css({display:'none'});
	};
	
	//聯絡我進場動態
	contactAni();
	
	frameAni();//根据imgFrame的值将显示对应人物图片
	
};


//關於我動態
function aboutAni(){
	
	//關於我內容退場---内容是：五个图片发生动态改变
	TweenLite.to( $('#aboutW_01'), 0.2, { css:{ top:45	+( sTop*-0.07 ) }, ease:Quart.easeOut});
	TweenLite.to( $('#aboutW_02'), 0.2, { css:{ top:290	+( sTop*0.07 ) }, ease:Quart.easeOut});	
	TweenLite.to( $('#aboutW_03'), 0.2, { css:{ top:53	+( sTop*-0.07 ) }, ease:Quart.easeOut});
	TweenLite.to( $('#aboutW_04'), 0.2, { css:{ top:215	+( sTop*0.07 ) }, ease:Quart.easeOut});
	
	TweenLite.to( $('#aboutCat'), 0.2, { css:{ top:40+(sTop*-0.05),left:327+(sTop*-0.05) }, ease:Quart.easeOut});
	
};

//關於我影格動態
function aboutImgAniFrame(){
	
	$.fn.aniBGFrameExt('#aboutW_01',233,2,0.5);
	$.fn.aniBGFrameExt('#aboutW_02',95,2,0.5);
	$.fn.aniBGFrameExt('#aboutW_03',169,2,0.5);
	$.fn.aniBGFrameExt('#aboutW_04',172,2,0.5);
	
	//$.fn.aniBGFrameExt('#aboutCat',32,3,0.5);
	
};

//作品集動態
var btnR;
var btnL;
function portfolioStartAni(){
	
	//按鈕進場---两个按钮发送动态改变
	btnR = -150 + 300*( aboutInitTop/( pagePortfolioStart - pageAboutEnd ) );
	btnL = -150 + 300*( aboutInitTop/( pagePortfolioStart - pageAboutEnd ) );
	
	TweenLite.to( $('#nextBtn'), 0.2, { css:{ right:btnR }, ease:Quart.easeOut});
	TweenLite.to( $('#prevBtn'), 0.2, { css:{ left:btnL }, ease:Quart.easeOut});
	
};

function portfolioEndAni(){
	
	TweenLite.to( $('#nextBtn'), 0.2, { css:{ right:150	+( portfolioInitTop*-0.07 ) }, ease:Quart.easeOut});
	TweenLite.to( $('#prevBtn'), 0.2, { css:{ left:150	+( portfolioInitTop*-0.07 ) }, ease:Quart.easeOut});
	
};

//聯絡我動態
var tagTop;
var headH;
function contactAni(){
	
	//聯絡我資訊進場
	tagTop = -447 + 447*( contactInitTop/( pageContactEnd - pageContactStart - winH) );	
	TweenLite.to( $('#contactTag'), 0.2, { css:{ top:tagTop }, ease:Quart.easeOut});
	
	headH = 207 + tagTop;
	if( headH < 0 ){
		headH = 0;
	};
	TweenLite.to( $('#contactHead'), 0.2, { css:{ top:-tagTop+54, height:headH }, ease:Quart.easeOut});
	
};

//聯絡我影格動態
function contactImgAniFrame(){
	
	$.fn.aniBGFrameExt('#tagPoker',227,2,0.5);
	
};

//影格動態
function frameAni(){
	
	//影格資訊
	infoTxt = sTop + ', frame:' + imgFrame + ', aboutTop:' + aboutInitTop + ', portfolioInitTop:' + portfolioInitTop + ', contactInitTop:' + contactInitTop + ', headH:' + headH;
	$('#txtShow').text(infoTxt);
	
	$('#videoPlay img.imgObj').css({
		display:'none'
	});
	
	$('#videoPlay img.imgObj').eq(imgFrame-1).css({
		display:'block'
	});
	
	$('#videoLargePlay img').remove();
	//http://www.oliveyang.com/
	$('<img class="imgObj" src="imgs/video/' + imgFrame + '.jpg"/>').appendTo('#videoLargePlay');
	
	$('#videoLargePlay').find('img').css({ width:777 });
	
};


